<template>
  <div class="detail">
    <div class="back" @click="changeRouter">fanhui</div>
    <PubVideo :id="'video1'" :config="videoConfig" />
    <div class="g-m-l-10 g-m-r-10">
      <div class="g-flex g-m-t-10">
        <img class="up-head-img" :src="pageData.poster" alt="" >
        <div class="g-m-l-10">
          <div class="up-name">罗翔六点半</div>
          <span>9.9 万粉丝</span>
          <span class="g-m-l-10">233 视频</span>
        </div>
        <van-button class="up-btn g-m-l-a" type="danger" @click="handleOpt('follow')">+ 关注</van-button>
      </div>
      <div class="g-m-t-10">
        <span># 话题标签</span>
        <span class="g-m-l-10">标题标题标题标题标题...</span>
      </div>
      <div class="g-m-t-10">
        <span>Bvw4543198</span>
        <span class="g-m-l-10">> 4.9万</span>
        <span class="g-m-l-10">2021-12-19 11：59</span>
        <span class="g-m-l-10">100人正在观看</span>
      </div>
      <div class="g-flex g-jc-sa g-m-t-10">
        <div>
          <img class="up-head-img" :src="pageData.poster" alt="" @click="handleOpt('praise')">
          <div class="g-m-t-10">9.9万</div>
        </div>
        <div>
          <img class="up-head-img" :src="pageData.poster" alt="" @click="handleOpt('start')">
          <div class="g-m-t-10">9.9万</div>
        </div>
        <div>
          <img class="up-head-img" :src="pageData.poster" alt="" @click="handleOpt('msg')">
          <div class="g-m-t-10">9.9万</div>
        </div>
        <div>
          <img class="up-head-img" :src="pageData.poster" alt="" @click="handleOpt('share')">
          <div class="g-m-t-10">9.9万</div>
        </div>
      </div>`
      <div class="g-flex">
        <span>标签</span>
        <span>标签</span>
        <span>标签</span>
        <span>标签</span>
        <span class="g-m-l-a" @click="changeRouter('detail-up')">更多7个 ></span>
      </div>
      <div class="g-flex g-m-t-10" v-for="item in 20" :key="item" @click="changeRouter('detail-up', item)">
        <img class="list-img" :src="pageData.poster" alt="">
        <div class="g-m-l-10">
          <div>标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题...</div>
          <span>UP主昵称</span>
          <div class="g-flex g-jc-sb">
            <span>4.9万 10小时前</span>
            <span>:</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'

export default {
  name: 'DetailUp',
  components: {
    PubVideo
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      videoConfig: {},
      videoDetailId: route.query.from || '1',
      pageData: {}
    })

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
          link: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
        }
      }
    }

    const router = useRouter()
    const changeRouter = (path, query) => {
      Toast.clear()
      Toast(`无操作权限\n请前往 ‘我的’ 充值开通会员`)
      if (path) router.push(path, {
        from: query
      })
      else router.go(0)
    }

    const handleOpt = type => {
      switch (type) {
        case 'follow':
          Toast('xiexie关注')
          break
        case 'praise':
          Toast('赞赞赞赞赞赞')
          break
        case 'start':
          Toast('收藏')
          break
        case 'msg':
          Toast('留言')
          break
        case 'share':
          Toast('分享')
          break
      }
    }

    onMounted(async () => {
      const { data } = await getVideoDetail()
      if (!data) {
        state.pageData = {}
        return
      }
      state.pageData = { ...data }
      state.videoConfig.video = data.link
      state.videoConfig.poster = data.poster
    })

    return {
      ...toRefs(state),
      changeRouter,
      handleOpt
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: red;
  font-size: 20px;
  z-index: 9;
}
.g-flex {
  display: flex;
}
.g-jc-sb {
  justify-content: space-between;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-m-l-10 {
  margin-left: 10px;
}
.g-m-r-10 {
  margin-right: 10px;
}
.g-m-t-10 {
  margin-top: 10px;
}
.g-m-l-a {
  margin-left: auto;
}
.up-head-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.up-name {
  height: 20px;
  font-size: 14px;
}
.up-btn {
  height: 28px;
}
.list-img {
  width: 116px;
  height: 60px;
  border-radius: 5px;
}
</style>